<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<script>
    // Our data object
    var data = { a: 1 };
    // The object is added to a Vue instance
    var vm = new Vue({
        data: data
    });
    // Getting the property on the instance
    // returns the one from the original data
    vm.a == data.a // => true
    // Setting the property on the instance
    // also affects the original data
    vm.a = 2
    data.a // => 2

    //==============================================
    var data = { a: 1 }
    var vm = new Vue({
        el: '#example',
        data: data
    })
    vm.$data === data // => true
    vm.$el === document.getElementById('example') // => true
    // $watch is an instance method
    vm.$watch('a', function (newValue, oldValue) {
        // This callback will be called when `vm.a` changes
    });

    new Vue({
        data: {
            a: 1
        },
        created: function () {
            // `this` points to the vm instance
            console.log('a is: ' + this.a)
        }
    })
// => "a is: 1"
</script>

<body>

</body>

</html>